<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <script src="/elementUI/index.js"></script>
    <style>
        .el-header,
        .el-footer {
            background-color: #23262E;
            color: white;
            text-align: left;
            line-height: 60px;
        }
        
        .el-aside {
            background-color: #393D49;
            color: white;
            text-align: center;
            line-height: 200px;
        }
        
        .el-main {
            color: #333;
            line-height: 160px;
            padding: 0;
            overflow: hidden;
        }
        
        body>.el-container {
            margin-bottom: 40px;
        }
        
        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }
        
        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        
        body {
            width: 100%;
            height: 100vh;
        }
        
        #app {
            height: 100%;
        }
        
        * {
            margin: 0;
        }
        
        .el-menu-vertical-demo {
            text-align: left;
        }
        
        #names {
            position: absolute;
            right: 10px;
            font-size: 20px;
        }
        
        a {
            text-decoration: none;
            /* 去除下划线 */
            color: inherit;
            /* 继承父元素的文字颜色 */
            background-color: transparent;
            /* 背景透明 */
        }
    </style>
</head>

<body>
    <el-container id="app">
        <el-header>
            <span style="padding-left: 20px;">XXX后台管理系统</span>
            <span id="names" style="padding-right: 0;">张三&nbsp;<a href="/logout">退出</a></span>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu class="el-menu-vertical-demo" @select="select" background-color="#393D49" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-s-tools"></i>
                        <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/goUsers">用户管理</el-menu-item>
                            <el-menu-item index="/goRole">角色管理</el-menu-item>
                            <el-menu-item index="/goPermission">权限管理</el-menu-item>
                            <el-menu-item index="/goSysLog">日志管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                        <i class="el-icon-document"></i>
                        <span>基础数据</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/goProduct">产品管理</el-menu-item>
                            <el-menu-item index="/goOrders">订单管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main id="">
                <iframe id="nr" width="99%" src="" height="95%"></iframe>
            </el-main>
        </el-container>
    </el-container>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            select(index) {
                document.getElementById("nr").src = index
            }
        }
    })
</script>

</html>